<template>
  <div>
    <!-- 点击搜索按钮弹出对话框 -->
    <el-button type="primary" @click="showSearchDialog">根据关键字搜索车辆信息</el-button>
    <el-button type="primary" @click="handleReset">重置搜索信息</el-button>

    <!-- 汽车信息 -->
    <el-table :data="carList" stripe border>
      <el-table-column label="车辆图片" width="120">
        <template slot-scope="scope">
          <!-- 检查图片数组是否存在，且不为空 -->
          <img v-if="scope.row.imgs && scope.row.imgs.length > 0" :src="scope.row.imgs[0].imageUrl" class="avatar">
        </template>
      </el-table-column>
      <el-table-column label="车辆编号" prop="id"></el-table-column>
      <el-table-column label="品牌" prop="brand"></el-table-column>
      <el-table-column label="型号" prop="model"></el-table-column>
      <el-table-column label="年份" prop="year"></el-table-column>
      <el-table-column label="里程数" prop="mileage"></el-table-column>
      <el-table-column label="颜色" prop="color"></el-table-column>
      <el-table-column label="车辆状况描述" prop="conditionDescription"></el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
    >
    </el-pagination>

    <!-- 搜索对话框 -->
    <el-dialog
        title="搜索车辆信息"
        :visible.sync="dialogVisible"
        width="30%"
    >
      <el-form :model="searchForm" inline>
        <el-form-item label="品牌">
          <el-input v-model="searchForm.brand" placeholder="请输入品牌"></el-input>
        </el-form-item>
        <el-form-item label="型号">
          <el-input v-model="searchForm.model" placeholder="请输入型号"></el-input>
        </el-form-item>
        <el-form-item label="年份">
          <el-input v-model.number="searchForm.year" placeholder="请输入年份"></el-input>
        </el-form-item>
        <el-form-item label="颜色">
          <el-input v-model="searchForm.color" placeholder="请输入颜色"></el-input>
        </el-form-item>
        <el-form-item label="里程数">
          <el-input v-model.number="searchForm.mileage" placeholder="请输入里程数"></el-input>
        </el-form-item>
        <el-form-item label="状况描述">
          <el-input v-model="searchForm.conditionDescription" placeholder="请输入状况描述"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 车辆详情对话框 -->
    <el-dialog
        title="车辆详情"
        :visible.sync="carDetailVisible"
        width="50%"
    >
      <el-table :data="carDetail" stripe border>
        <el-table-column label="车辆编号" prop="id"></el-table-column>
        <el-table-column label="品牌" prop="brand"></el-table-column>
        <el-table-column label="型号" prop="model"></el-table-column>
        <el-table-column label="年份" prop="year"></el-table-column>
        <el-table-column label="里程数" prop="mileage"></el-table-column>
        <el-table-column label="颜色" prop="color"></el-table-column>
        <el-table-column label="车辆状况描述" prop="conditionDescription"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios';
import { Message, Loading } from 'element-ui';

export default {
  data() {
    return {
      dialogVisible: false,
      carDetailVisible: false,
      searchForm: {
        brand: '',
        model: '',
        year: null,
        color: '',
        mileage: null,
        conditionDescription: '',
      },
      carList: [],
      carDetail: {},
      currentPage: 1,
      pageSize: 10,
      total: 0,
      loadingInstance: null,
    };
  },
  created() {
    this.loadData();
  },
  methods: {
    async loadData() {
      this.loadingInstance = Loading.service({fullscreen: true});
      try {
        const response = await axios.get("/api/user/activity/findCar")
        if (response.data.code === 200) {
          this.carList = response.data.data.list;
          this.total = response.data.data.total;
        } else {
          Message.error(response.data.message || '获取数据失败');
        }
      } catch (error) {
        Message.error('请求失败，请稍后重试');
      } finally {
        this.loadingInstance.close();
      }
    },
    showSearchDialog() {
      this.dialogVisible = true;
    },
    async handleSearch() {
      this.currentPage = 1;
      await this.loadData();
      this.dialogVisible = false;
    },
    handleReset() {
      for (let key in this.searchForm) {
        this.searchForm[key] = '';
      }
      this.currentPage = 1;
      this.loadData();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.loadData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.loadData();
    },
  },
};
</script>

<style scoped>
.avatar {
  width: 100px;
  height: auto;
}
</style>
